<template>
  <!-- 系统日志主容器：包含整个系统日志页面 -->
  <div class="syslog-container">
    <!-- 搜索栏：用于根据状态过滤日志记录 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <!-- 日志状态筛选项：成功/失败 -->
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option :value="1" label="成功"></el-option>
            <el-option :value="0" label="失败"></el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索按钮组 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryLog">查询</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域：显示系统日志记录 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266', fontWeight: 'bold'}"
      >
        <!-- 序号列 -->
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <!-- 操作账号列：显示执行操作的用户账号 -->
        <el-table-column prop="account" label="账号" width="120" show-overflow-tooltip></el-table-column>
        <!-- 操作方法列：显示调用的系统方法 -->
        <el-table-column prop="method" label="操作方法" width="250" show-overflow-tooltip></el-table-column>
        <!-- 操作参数列：显示方法的参数信息 -->
        <el-table-column prop="params" label="操作参数" width="250" show-overflow-tooltip></el-table-column>
        <!-- IP地址列：显示操作者的IP地址 -->
        <el-table-column prop="ip" label="IP地址" width="140" show-overflow-tooltip></el-table-column>
        <!-- 操作状态列：使用不同颜色的标签标识成功/失败状态 -->
        <el-table-column prop="status" label="状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 错误信息列：显示操作失败时的错误详情 -->
        <el-table-column prop="errorMsg" label="错误信息" width="180" show-overflow-tooltip></el-table-column>
        <!-- 操作时间列：显示操作执行的时间 -->
        <el-table-column prop="createTime" label="操作时间" width="140"></el-table-column>
        <!-- 操作描述列：显示操作的用途和描述 -->
        <el-table-column prop="sysDescribe" label="操作描述" width="180" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <!-- 分页器：控制日志记录的分页显示 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[5, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'SysLog',
  data() {
    return {
      // 搜索表单数据，存储状态筛选条件
      searchForm: {
        status: '' // 日志状态：1-成功，0-失败，空-全部
      },
      // 表格数据，存储日志列表
      tableData: [],
      // 控制表格加载状态的标志
      loading: false,
      // 分页设置，控制分页器的行为
      pagination: {
        currentPage: 1, // 当前页码
        pageSize: 5,    // 每页显示条数
        total: 0        // 总记录数
      }
    }
  },
  // 生命周期钩子：组件创建时加载日志列表数据
  created() {
    this.queryLog()
  },
  methods: {
    /**
     * 获取日志列表数据
     * 从后端API获取系统日志数据并更新表格
     * 支持分页和状态筛选
     */
    async queryLog() {
      // 显示加载状态
      this.loading = true
      try {
        // 构建查询参数
        const params = {
          pageNum: this.pagination.currentPage, // 当前页码
          pageSize: this.pagination.pageSize,   // 每页条数
          param: this.searchForm.status         // 状态筛选参数
        }
        
        
        // 发送请求获取日志数据
        const response = await this.$axios.post('/api/uums-server/log/queryLog',params);

        if (response.data.code === 200) {
          // 请求成功，更新表格数据和总记录数
          this.tableData = response.data.data.list || []
          this.pagination.total = response.data.data.total || 0
        } else {
          // 请求失败，显示错误信息
          this.$message.error(response.data.message || '获取日志列表失败')
        }
      } catch (error) {
        // 处理异常情况
        console.error('获取日志列表出错:', error)
        this.$message.error('系统异常，请稍后重试')
      } finally {
        // 无论成功失败，都隐藏加载状态
        this.loading = false
      }
    },
    
    /**
     * 处理搜索按钮点击事件
     * 重置页码并重新加载数据
     */
    handleSearch() {
      this.pagination.currentPage = 1 // 重置为第一页
      this.fetchLogs() // 重新加载数据
    },
    
    /**
     * 处理重置按钮点击事件
     * 清空搜索条件并重新加载数据
     */
    handleReset() {
      this.searchForm = {
        status: '' // 重置状态筛选条件
      }
      this.handleSearch() // 调用搜索方法重新加载数据
    },
    
    /**
     * 处理每页显示条数变化事件
     * 更新每页显示条数并重新加载数据
     * @param {Number} size - 新的每页条数
     */
    handleSizeChange(size) {
      this.pagination.pageSize = size // 更新每页条数
      this.queryLog() // 重新加载数据
    },
    
    /**
     * 处理页码变化事件
     * 更新当前页码并重新加载数据
     * @param {Number} page - 新的页码
     */
    handleCurrentChange(page) {
      this.pagination.currentPage = page // 更新当前页码
      this.queryLog() // 重新加载数据
    }
  }
}
</script>

<style>
/* 系统日志容器：设置基本布局和样式 */
.syslog-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 搜索容器：设置搜索区域的背景、边距和圆角 */
.search-container {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

/* 搜索表单项样式：控制表单项的间距 */
.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 15px;
}

/* 表格容器：设置底部外边距 */
.table-container {
  margin-bottom: 20px;
}

/* 分页容器：设置顶部外边距和对齐方式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 表格内容过长时显示省略号 */
.el-table .cell {
  white-space: nowrap;
}

/* 设置表格列的最小宽度，确保表格能完整显示 */
.el-table__body,
.el-table__header {
  min-width: 100%;
}
</style>